import React, { useState } from 'react';
import { Button, Popconfirm, Select, Space, Typography } from 'antd';
import { TeamOutlined, LogoutOutlined, DownOutlined } from '@ant-design/icons';
import { Team } from '@/types/account';
import JoinTeamModal from '@/components/JoinTeamModal';
import styles from '../index.module.css';

const { Title, Text } = Typography;

interface TeamDisplayComponentProps {
  currentTeam: Team | null;
  myTeams: Team[];
  onTeamChange: (teamId: number) => void;
  onLeaveTeam: () => void;
  onJoinSuccess: () => void;
}

/**
 * 加入团队后的团队显示组件
 */
const TeamDisplayComponent: React.FC<TeamDisplayComponentProps> = ({
  currentTeam,
  myTeams,
  onTeamChange,
  onLeaveTeam,
  onJoinSuccess
}) => {
  const [joinModalVisible, setJoinModalVisible] = useState(false);

  const handleJoinTeamSuccess = () => {
    setJoinModalVisible(false);
    onJoinSuccess();
  };

  return (
    <>
      <div className={styles.header}>
        <div className={styles.teamInfo}>
          {currentTeam && (
            <>
              <Title level={2}>
                <TeamOutlined /> {currentTeam.name}
              </Title>
              <Text type="secondary">
                创建者: {currentTeam.creator_name} | 成员: {currentTeam.member_count}人
              </Text>
              {currentTeam.description && (
                <Text type="secondary" style={{ display: 'block', marginTop: 8 }}>
                  {currentTeam.description}
                </Text>
              )}
            </>
          )}
        </div>
        
        <Space>
          <Select
            value={currentTeam?.id}
            onChange={onTeamChange}
            style={{ width: 200 }}
            placeholder="选择团队"
            suffixIcon={<DownOutlined />}
          >
            {myTeams.map(team => (
              <Select.Option key={team.id} value={team.id}>
                {team.name}
              </Select.Option>
            ))}
          </Select>
          <Button
            icon={<TeamOutlined />}
            onClick={() => setJoinModalVisible(true)}
          >
            加入新团队
          </Button>
          {currentTeam && (
            <Popconfirm
              title="确定要退出当前团队吗？"
              onConfirm={onLeaveTeam}
              okText="确定"
              cancelText="取消"
            >
              <Button
                danger
                icon={<LogoutOutlined />}
              >
                退出团队
              </Button>
            </Popconfirm>
          )}
        </Space>
      </div>

      <JoinTeamModal
        visible={joinModalVisible}
        onCancel={() => setJoinModalVisible(false)}
        onSuccess={handleJoinTeamSuccess}
      />
    </>
  );
};

export default TeamDisplayComponent;
